<template>
    <div class="orderhandle_detail">
        <Card>
            <p slot="title">
                物流订单详情
            </p>
            <div class="container">
                <Row span="24" class="row-box">
                    <ul class="title-list">
                        <li>物流单号</li>
                        <li>{{adminTransportOrder.order_no}}</li>
                        <li>{{order_status[adminTransportOrder.order_status]}}</li>
                    </ul>
                    <ul class="content-list">
                        <li>
                            <span>始发地：</span>
                            <span class="atorder">{{adminTransportOrder.begin_province}}-</span><span class="atorder">{{adminTransportOrder.begin_city}}</span>
                        </li>
                        <li>
                            <span>目的地：</span>
                            <span class="atorder">{{adminTransportOrder.end_province}}-</span><span class="atorder">{{adminTransportOrder.end_city}}</span>
                        </li>
                        <li>
                            <span>发车日期：</span>
                            <span class="atorder">{{adminTransportOrder.begin_date}}</span>
                        </li>
                        <!--  <li>
                             <span>实发日期：</span>
                             <span class="atorder">{{adminTransportOrder.begin_date}}</span>
                         </li>-->
                        <li>
                            <span>下单时间：</span>
                            <span class="atorder">{{adminTransportOrder.create_time}}</span>
                        </li>
                        <li>
                            <span>购车单号：</span>
                            <span class="atorder">{{adminTransportOrder.trade_order_id}}</span>
                        </li>
                        <li>
                            <span>企业名称：</span>
                            <span class="atorder">{{adminTransportOrder.party_name}}</span>
                        </li>
                        <li>
                            <span>企业类型：</span>
                            <span class="atorder">{{party_type[adminTransportOrder.partyType]}}</span>
                        </li>
                    </ul>
                </Row>
                <Row class="row-box">
                    <ul class="title-list">
                        <li>车辆信息</li>
                    </ul>
                    <Table border :columns="columns_info" :data="tableData_info"></Table>
                </Row>
                <Row class="row-box">
                    <ul class="info-list">
                        <li>
                            <p class="info-title">提车信息</p>
                            <p>
                                <Checkbox disabled  v-model="visit"></Checkbox>上门提车
                            </p>
                            <p>
                                <span>联系人:</span>
                                <span>{{sendPersonTransportAddress.user_name}}</span>
                            </p>
                            <p>
                                <span>联系电话:</span>
                                <span>{{sendPersonTransportAddress.user_phone}}</span>
                            </p>
                            <p>
                                <span>提车地址:</span>
                                <span>{{sendPersonTransportAddress.address}}</span>
                            </p>
                            <p class="info-title">提车委托人</p>
                            <p>
                                <span>提车委托:</span>
                                <span>{{bringentrust}}</span>
                            </p>
                            <p>
                                <span>联系电话:</span>
                                <span>{{phone}}</span>
                            </p>
                            <p>
                                <span>身份证号:</span>
                                <span>{{identity}}</span>
                            </p>
                        </li>
                        <li>
                            <p class="info-title">送车信息</p>
                            <p>
                                <Checkbox disabled v-model="car_door"></Checkbox>送车上门
                            </p>
                            <p>
                                <span>收车人:</span>
                                <span>{{receivePersonTransportAddress.user_name}}</span>
                            </p>
                            <p>
                                <span>联系电话:</span>
                                <span>{{receivePersonTransportAddress.user_phone}}</span>
                            </p>
                            <p>
                                <span>身份证号:</span>
                                <span>{{receivePersonTransportAddress.user_card}}</span>
                            </p>
                            <Form>
                                <FormItem style="margin-bottom: 5px;">
                                    <span style="vertical-align: top;font-size:14px">身份证照片:</span>
                                    <a style="text-decoration: underline;font-size:14px" @click="identity_examine">查看</a>
                                </FormItem>
                            </Form>
                            <p>
                                <span>收车车地址:</span>
                                <span>{{receivePersonTransportAddress.address}}</span>
                            </p>
                            <p>
                                <span style="vertical-align: top">交车确认单:</span>
                                <a style="text-decoration: underline" @click="examine">查看</a>
                            </p>
                            <p class="info-title">送车委托人</p>
                            <p>
                                <span>送车委托:</span>
                                <span>{{entrust}}</span>
                            </p>
                            <p>
                                <span>联系电话:</span>
                                <span>{{phones}}</span>
                            </p>
                        </li>
                    </ul>
                </Row>
                <Row class="row-box">
                    <ul class="title-list">
                        <li>物流报价</li>
                    </ul>
                    <Table  border :columns="columns_offer" :data="tableData_offer"></Table>
                </Row>
                <Row class="row-box">
                    <ul class="title-list">
                        <li>订单结算</li>
                    </ul>
                    <p>
                        <span>结算金额:</span>
                        <a>{{settle_account }}</a>
                    </p>
                    <p>
                        <span>运车物流:</span>
                        <span>{{car_carrier}}</span>
                    </p>
                    <p>
                        <span>发票信息:</span>
                        <Checkbox v-model="need_invoice"></Checkbox>需要
                        <a v-if="invoice_info" style="text-decoration: underline" @click="inVoice_info">查看发票</a>
                    </p>
                    <p class="remark">
                        <span>备注说明:</span>
                        <textarea disabled v-model="remark"></textarea>
                    </p>
                </Row>
                <Row class="row-box">
                    <ul class="title-list">
                        <li>订单轨迹</li>
                    </ul>
                        <Tabs>
                            <Tab-pane label="物流轨迹">
                                <Table  border :columns="columns_logistics" :data="tableData_logistics"></Table>
                            </Tab-pane>
                            <Tab-pane label="处理轨迹">
                                <Table  border :columns="columns_dispose" :data="tableData_dispose"></Table>
                            </Tab-pane>
                        </Tabs>
                </Row>
                <Row class="row-box">
                    <p class="detail-footer">
                        <Button class="detail-btn" @click="cancel">返回</Button >
                    </p>
                </Row>
                <!--发票弹窗-->
                <modal ref="createApp" v-model="invoice_dialogAdd"  title="开具发票">
                    <Form class="orderhandle" style="max-height:300px;overflow: auto">
                        <FormItem label="发票类型：">
                            <Radio-group v-model="inVoice.invoice_type">
                                <Radio disabled label="0">普通发票</Radio>
                                <Radio disabled label="1">增值税发票</Radio>
                            </Radio-group>
                        </FormItem>
                        <!--普通发票-->
                        <Form ref="inVoice" :model="inVoice" :rules="inVoiceValidate" v-if="inVoice.invoice_type == 0">
                            <FormItem label="发票抬头：" prop="invoice_title">
                                <Input disabled type="text" placeholder="填写单位名称全称（必填）"  v-model="inVoice.invoice_title" style="width:260px"></Input>
                            </FormItem>
                            <FormItem  label="税号：" prop="duty_paragraph">
                                <Input disabled type="text" placeholder="填写社会统一信用代码（必填）" v-model="inVoice.duty_paragraph" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="单位地址：" prop="unit_address">
                                <Input disabled type="text" placeholder="填写单位营业执照上注册的地址(普发可不填)" v-model="inVoice.unit_address" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="电话：" prop="phone">
                                <Input disabled type="text" placeholder="填写税务登记的电话号码(普发可不填)" v-model="inVoice.phone" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="开户行：" prop="opening_bank">
                                <Input disabled  type="text" placeholder="填写税务局开户的备案银行(普发可不填)" v-model="inVoice.opening_bank" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="银行账号：" prop="bank_account">
                                <Input disabled type="text" placeholder="填写税务局开户的备案银行账号(普发可不填)" v-model="inVoice.bank_account" style="width:260px"></Input>
                            </FormItem>
                        </Form>
                        <!--增值税发票-->
                        <Form ref="inVoice" :model="inVoice" :rules="inVoiceruleValidate" v-if="inVoice.invoice_type == 1">
                            <FormItem label="发票抬头：" prop="invoice_title">
                                <Input disabled type="text" placeholder="填写单位名称全称（必填）"  v-model="inVoice.invoice_title" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="税号：" prop="duty_paragraph">
                                <Input disabled type="text" placeholder="填写社会统一信用代码（必填）" v-model="inVoice.duty_paragraph" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="单位地址：" prop="unit_address">
                                <Input disabled type="text" placeholder="填写单位营业执照上注册的地址(必填)" v-model="inVoice.unit_address" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="电话：" prop="phone">
                                <Input disabled type="text" placeholder="填写税务登记的电话号码(必填)" v-model="inVoice.phone" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="开户行：" prop="opening_bank">
                                <Input disabled type="text" placeholder="填写税务局开户的备案银行(必填)" v-model="inVoice.opening_bank" style="width:260px"></Input>
                            </FormItem>
                            <FormItem label="银行账号：" prop="bank_account">
                                <Input disabled type="text" placeholder="填写税务局开户的备案银行账号(必填)" v-model="inVoice.bank_account" style="width:260px"></Input>
                            </FormItem>
                        </Form>
                    </Form>
                    <div slot="footer">
                        <Button type="ghost" @click="inVoice_cancel">关闭</Button>
                    </div>
                </modal>

                <!--查看交车确认单弹窗-->

                <modal ref="createApp" v-model="confirmation_dialogAdd"  title="交车确认单图片">
                    <Form  style="max-height:300px;overflow: auto">
                        <FormItem>
                            <img style="margin-right: 10px"  v-if="url_list !== ''"  v-for="(item,index) in url_list"  :src="item" :key="index" height="200" width="200">
                        </FormItem>
                    </Form>
                    <div slot="footer">
                        <Button type="ghost" @click="off">关闭</Button>
                    </div>
                </modal>

                <!--查看身份证照片弹窗-->

                <modal ref="createApp" v-model="identity_dialogAdd"  title="身份证照片">
                    <Form  style="max-height:300px;overflow: auto">
                        <FormItem>
                            <img v-if="uploadUrl !== ''"  :src="uploadUrl" height="200" width="200">
                        </FormItem>
                    </Form>
                    <div slot="footer">
                        <Button type="ghost" @click="identity_off">关闭</Button>
                    </div>
                </modal>
            </div>
        </Card>
    </div>
</template>

<script>
    import ajax from '../../../libs/axios.js'
    export default {
        name: 'addUser',
        data () {
            return {
                url_list:[],
                imgUrl:[],
                dialogAdd:false,                 // 修改弹窗是否显示
                invoice_dialogAdd:false,         // 发票弹窗是否显示
                inVoice:{
                    invoice_type:"0",            // 选择类型  普通发票 or 增值税发票
                    invoice_title:"",            // 发票抬头
                    duty_paragraph:"",           // 税号
                    unit_address:"",             // 单位地址
                    phone:"",                    // 电话
                    opening_bank:"",             // 开户行
                    bank_account:""              // 银行账号
                },
                addApply:{
                    reference_price:"",          // 参考价
                    estimate_price:"",           // 预估价
                    real_price:"",               // 实报价
                },
                order_info_id:"",
                settle_account:"",               // 结算金额
                car_carrier:"",                  // 运车物流
                remark:"",                       // 备注说明
                uploadUrl:"",                    // 上传图片路径
                visit:false,                     // 上门取车
                car_door:false,                  // 送车上门
                need_invoice:false,              // 是否需要发票
                invoice_info:false,              // 发票信息是否显示
                confirmation_dialogAdd:false,
                identity_dialogAdd:false,
                entrust:"",                        // 送车委托人
                phones:"",                         // 送车联系电话

                bringentrust:"",                   // 提车委托人
                phone:"",                          // 提车联系电话
                identity:"",                       // 提车人身份证号
                user_card:"",                    // 身份证号
                currentid:0,                     // 物流报价单选按钮
                adminTransportOrder:{},          // 物流单号数据对象
                sendPersonTransportAddress:{},   // 提车信息数据对象
                receivePersonTransportAddress:{},// 收车信息数据对象
                adminTransportInvoice:{},        //
                tableData_info:[],               // 车辆信息列表数据集合
                tableData_offer:[],              // 物流报价列表数据集合
                tableData_logistics:[],          // 物流轨迹列表数据集合
                tableData_dispose:[],            // 处理轨迹列表数据集合
                columns_info:[
                    {
                        title: '序号',
                        width:80,
                        align: 'center',
                        type: 'index'
                    },
                    {
                        title: '品牌车系',
                        align: 'center',
                        key: 'car_series'
                    },
                    {
                        title: '车型',
                        align: 'center',
                        key: 'car_size',
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'car_status',
                        render: (h, params) => {
                            if (params.row.can_drive === 0) {
                                return h('span', '不能')
                            }else if(params.row.can_drive === 1) {
                                return h('span', '能')
                            }
                        }
                    },
                    {
                        title: '估值(万元/辆)',
                        align: 'center',
                        key: 'valuation'
                    },
                    {
                        title: '台数',
                        align: 'center',
                        key: 'car_count'
                    },
                ],
                columns_offer:[
                    {
                        title: '选择',
                        key: 'chose',
                        width: 70,
                        align: 'center',
                        render: (h, params) => {
                            if(this.order_info_id){
                                if (!this.settle_account){
                                    this.settle_account=params.row.final_price
                                }
                                if (!this.car_carrier){
                                    this.car_carrier=params.row.long_name
                                }
                            }
                            let id = params.row.id;
                            this.currentid=this.order_info_id;
                            let flag = false;
                            if (this.currentid === id) {
                                flag = true
                            } else {
                                flag = false
                            }
                            let self = this
                            return h('div', [
                                h('Radio', {
                                    props: {
                                        value: flag
                                    },
                                    on: {
                                        'on-change': () => {
                                            self.currentid = id
                                            this.settle_account=params.row.final_price
                                            this.car_carrier=params.row.long_name
                                        }
                                    }
                                })
                            ])
                        }
                    },
                    {
                        title: '物流',
                        align: 'center',
                        key: 'short_name',
                    },
                    {
                        title: '参考价',
                        align: 'center',
                        key: 'reference_price',
                    },
                    {
                        title: '预估价',
                        align: 'center',
                        key: 'all_cost',
                    },
                    {
                        title: '实报价',
                        align: 'center',
                        key: 'final_price'
                    },
                    {
                        title: '预到时间',
                        align: 'center',
                        key: 'arrive_time'
                    },

                ],
                columns_logistics:[
                    {
                        title: '时间',
                        align: 'center',
                        key: 'create_time'
                    },
                    {
                        title: '节点',
                        align: 'center',
                        key: 'remark',
                    },
                ],
                columns_dispose:[
                    {
                        title: '时间',
                        align: 'center',
                        key: 'create_time'
                    },
                    {
                        title: '操作内容',
                        align: 'center',
                        key: 'remark',
                    },
                    {
                        title: '操作员',
                        align: 'center',
                        key: 'operator',
                    },
                ],
                order_status:{"-1":"已取消","1":"待报价","2":"待确认","3":"待安排","4":"待发运","5":"运输中","6":"待收车","7":"已完成"},  // 订单状态
                party_type:{"1":"2P","2":"4S","3":"质押监管员","4":"2B","5":"小b","6":"个人"},   // 公司类型
                // 修改弹窗表单验证
                ruleValidate:{
                    reference_price:[
                        { required: true, message: '参考价不能为空', trigger: 'blur' }
                    ],
                    estimate_price:[
                        { required: true, message: '预估价不能为空', trigger: 'blur' }
                    ],
                    real_price:[
                        { required: true, message: '实报价不能为空', trigger: 'blur' }
                    ]
                },
                 // 发票弹窗表单验证
                 inVoiceValidate:{
                     invoice_title:[
                         { required: true, message: '发票抬头不能为空', trigger: 'blur' }
                     ],
                     duty_paragraph:[
                         { required: true, message: '税号不能为空', trigger: 'blur' }
                     ],
                 },
                 inVoiceruleValidate:{
                     invoice_title:[
                         { required: true, message: '发票抬头不能为空', trigger: 'blur' }
                     ],
                     duty_paragraph:[
                         { required: true, message: '税号不能为空', trigger: 'blur' }
                     ],
                     unit_address:[
                         { required: true, message: '单位地址不能为空', trigger: 'blur' }
                     ],
                     phone:[
                         { required: true, message: '电话号码不能为空', trigger: 'blur' }
                     ],
                     opening_bank:[
                         { required: true, message: '开户行不能为空', trigger: 'blur' }
                     ],
                     bank_account:[
                         { required: true, message: '银行账号不能为空', trigger: 'blur' }
                     ]

                 }
            }
        },
        created () {
            this.init();
        },
        activated (){},
        methods: {
            // 数据初始化
            init () {
                this.$store.commit('setActiveName', 'ordercancelindex');
                this.getlist();
            },
            // 获取列表
            getlist(){
                let url="adminlogin/transportOrder/selectTransportById";
                let data = {
                    id:this.$route.params.id
                }
                ajax.formRes(url, data).then(res => {
                    this.order_info_id=res.data.adminTransportOrder.order_info_id

                    // 是否需要发票
                    if (res.data.adminTransportOrder.need_invoice  == 1){
                        this.need_invoice=true;
                    }else if (res.data.adminTransportOrder.need_invoice  == 0){
                        this.need_invoice=false;
                    }

                    // 交车确认单图片数据集合
                    this.url_list=res.data.adminTransportOrder.pathList;

                    this.uploadUrl=res.data.receivePersonTransportAddress.card_image;

                    this.adminTransportOrder=res.data.adminTransportOrder;
                    this.remark=res.data.adminTransportOrder.remark;
                    this.tableData_info=res.data.adminTransportOrderCarList;
                    this.sendPersonTransportAddress=res.data.sendPersonTransportAddress;
                    this.receivePersonTransportAddress=res.data.receivePersonTransportAddress;
                    this.tableData_offer=res.data.adminTransportOrderInfoList;

                    let _this=this;
                    res.data.adminTransportOrderInfoList.forEach(function (val,idx) {
                        if (val.id == res.data.adminTransportOrder.order_info_id){
                            _this.entrust=val.transport_driver;
                            _this.phones=val.transport_driver_phone;
                            _this.bringentrust=val.checker_driver;
                            _this.phone=val.checker_driver_phone;
                            _this.identity=val.checker_driver_card;
                        }
                    });


                    // 发票信息
                    this.adminTransportInvoice=res.data.adminTransportInvoice;
                    this.inVoice.invoice_type=res.data.adminTransportInvoice.invoice_type.toString();
                    this.inVoice.duty_paragraph=res.data.adminTransportInvoice.taxpayer_no;
                    this.inVoice.unit_address=res.data.adminTransportInvoice.cust_addr;
                    this.inVoice.phone=res.data.adminTransportInvoice.cust_phone;
                    this.inVoice.opening_bank=res.data.adminTransportInvoice.depositBank;
                    this.inVoice.bank_account=res.data.adminTransportInvoice.account;
                    this.inVoice.invoice_title=res.data.adminTransportInvoice.cust_name;
                    // 身份证号
                    this.user_card=this.sendPersonTransportAddress.user_card;
                    //物流轨迹数据集合
                    this.tableData_logistics=res.data.logisticsTrajectoryList;

                    //处理轨迹数据集合
                    this.tableData_dispose=res.data.processingTrackList;

                    if (res.data.adminTransportOrder.need_take  == 1){
                        this.visit=true;
                    }else if (res.data.adminTransportOrder.need_take  == 0){
                        this.visit=false;
                    }
                    if (res.data.adminTransportOrder.need_give  == 1){
                        this.car_door=true;
                    }else if (res.data.adminTransportOrder.need_give  == 0){
                        this.car_door=false;
                    }



                 /*   // console.log(res.data);
                    console.log(res.data.logisticsTrajectoryList)*/
                }).catch(err => {
                    console.log('有错误信息')
                })
            },
            // 发票弹窗取消按钮
            inVoice_cancel(){
                this.invoice_dialogAdd=false;  // 取消关闭弹窗
            },
            // 上传文件
            handleUpload (file) {
                this.file = file
                this.upload();
                return false;
            },
            // 上传图片
            upload (type) {
                let _this = this
                let fileName = _this.file.name
                //FormData 对象
                let formData = new FormData()
                // 文件对象
                formData.append("img", _this.file)
                formData.append("type", "partyInfo")
                ajax.upload('adminlogin/file/uploadOssImage',formData).then(function (res) {
                    setTimeout(() => {
                        _this.uploadUrl = res.url;
                        _this.file = '';
                        _this.$Message.success('上传成功');
                    }, 500);
                }, function (err) {
                    console.log(err)
                }).catch(function (error) {
                    console.log(error)
                })
            },
            cancel(){
                this.$router.push({name: 'ordercancelindex',})
            },
            // 发票信息
            inVoice_info(){
                this.invoice_dialogAdd=true;
            },
            // 查看
            examine(){
                if (this.url_list.length !== 0) {
                    this.confirmation_dialogAdd = true;
                }else{
                    this.$Message.info("无交车确认单")
                }
            },
            // 关闭
            off(){
                this.confirmation_dialogAdd=false;
            },
            // 身份证照片查看
            identity_examine(){
                if(this.uploadUrl == undefined){
                    this.$Message.info("请先上传身份证照片");
                }else{
                    this.identity_dialogAdd=true;
                }

            },
            // 身份证照片关闭
            identity_off(){
                this.identity_dialogAdd=false;
            }
        },
        watch:{
            need_invoice(newVal,oldVal){
                if (newVal){
                    this.invoice_info=true;
                }else{
                    this.invoice_info=false;
                }
            },
        },
    }
</script>


<style lang="less">
    @import "./less/common";
</style>


<style>
    .orderhandle  .ivu-form .ivu-form-item-label{
        width: 82px;
    }
</style>


